<template>
    <el-dialog
            v-model="dialogVisible"
            :title="dialogTitle"
            width="50%"
            @close="handleClose"
    >
        <el-form
                ref="roleFormRef"
                :model="roleForm"
                :rules="roleFormRules"
                label-width="120px"
                status-icon
        >
            <el-form-item label="角色名称" prop="roleName">
                <el-input v-model="roleForm.roleName" placeholder="请输入"/>
            </el-form-item>
            <el-form-item label="备注信息" prop="remark">
                <el-input v-model="roleForm.remark" placeholder="请输入"  :rows="2" type="textarea"></el-input>
            </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="handleClose">取消</el-button>
            <el-button type="primary" @click="handleSubmit">确认</el-button>
          </span>
        </template>
    </el-dialog>
</template>
<script setup>
    defineOptions({
        name: 'RoleDialog',
        inheritAttrs: false,
    })
    const { proxy } = getCurrentInstance()

    const props = defineProps({
        visible: {
            type: Boolean,
            default: false
        },
        role: {
            type: Object,
            default: () => {
                return {}
            }
        },
        mode: {
            type: Number,
            default: 1
        }
    })

    let dialogVisible = ref(false)
    let dialogTitle = ref('新增')
    let currentAction = ref('add')
    const queryOptions = ref([
        {value: 1, label: '在职'},
        {value: 2, label: '离职'},
        {value: 3, label: '试用期'}
    ])
    const roleOptions = ref([])
    const deptOptions = ref([])
    const props1 = {
        checkStrictly: true,
        label: 'deptName',
        value: '_id'
    }
    const roleForm = ref({})
    const roleFormRef = ref()
    const roleFormRules = ref({
        roleName: [
            { required: true, message: '请输入角色名称', trigger: 'blur' },
        ]
    })

    watch(() => [props.visible, props.role, props.mode], (val) => {
        console.log(props.visible, val[0]);
        console.log(props.role, val[1]);
        console.log(props.mode, val[2]);
        dialogVisible.value = val[0]
        Object.assign(roleForm.value, val[1])
        val[2] === 1 ? addMode() : editMode()
    })

    const emit = defineEmits(['update:visible', 'submit'])

    onMounted(() => {
    })

    const handleClose = () => {
        if (roleFormRef.value) {
            roleFormRef.value.resetFields()
        }
        close()
    }
    const addMode = () => {
        currentAction.value = 'add'
        dialogTitle.value = '新增'
    }
    const editMode= (item) => {
        currentAction.value = 'edit'
        dialogTitle.value = '编辑'
    }


    const close = () => {
        emit("update:visible", false)
    }

    const handleSubmit = () => {
        roleFormRef.value.validate(async (valid) => {
            if (valid) {
                const params = toRaw(roleForm.value)
                params.action = currentAction.value
                await proxy.$api.operateRole(params)
                proxy.$message.success(`${dialogTitle.value}成功`)
                emit('submit')
                close()
            }
        })
    }

    // defineExpose({
    //     addAction,
    //     editAction
    // })
</script>

<style scoped>

</style>
